<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
width  布局视口 
device-width  理想视口 
initial-scale 初始化的缩放比例  布局视口/理想视口
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04.布局视口和理想视口</title>
    <style>
            * {
                margin: 0;
                padding: 0;
            }
            .p {
                display: flex;
                flex-wrap: wrap;
            }
            .s1 {
                width: 50%;
                /* height: 50%; */
                background-color: red;
                /* flex: 1; */
                height: 50vh;

            }
            .s2 {
                width:50%;
                height: 50%;
                background-color: blue;
                height: 50vh;
                /* flex: 1; */
            }


    </style>
</head>
<body>
    
    <div class="p">
        <div class="s1">
            xxx

        </div>
        <div class="s2">
            ###
        </div>
    </div>
    
</body>
</html>